$(function () {

  var container = document.querySelector("#items-wrap")

  function init() {
    renderBefore();
    let res = $.ajax({
        url: "http://localhost:8080/static/data/index_datalist.json",
        type: "GET",
        dataType: "json"
      })
      .done(function (res) {
        // console.log(res);
        renderPage(res);
        $(".lazyload").lazyload();
      })
  }

  function renderBefore() {
    $(".content").before(`<div class="leftBox">
        <div class="leftCon">
            <div class="userInfo">
                <div class="headPortrait">
                    <a href="http://localhost:8080/dist/login.html"><img src="../static/images/index/txImg.png"></a>
                </div>
                <p>
                    <a href="./login.html">登录</a>/<a href="./register.html" target="_blank">注册</a>
                </p>
            </div>
            <div class="navCon">
                <ul class="nav">
                    <li id="_home" class="cur">
                        <a href="../dist/">
                            <em class="homeIcon"></em>
                            首页
                        </a>
                    </li>
                    <li id="_service">
                        <a href="/service">
                            <em class="serviceIcon"></em>
                            服务
                        </a>
                    </li>
                </ul>
            </div>
        </div>
      </div>`);
  }

  function renderPage(res) {
    container.innerHTML = res.list.map(
      function (item) {
        if (item.type === "company") {
          return `<div class="list company">
            <div class="name">
              <a href="./goods.html#id=${item.id}" target="_blank">${item.title}</a>
            </div>
            <div class="intro">
              <p class="p1">${item.intro}</p>
              <p class="p2">服务型</p>
              <p class="p2">生产型</p>
            </div>
            <div class="pro">
              <div class="img">
                <a href="./goods.html#id=${item.id}"><img class="lazyload" data-original="${item.pro[0]}"></a>
              </div>
              <div class="img">
                <a href="./goods.html#id=${item.id}"><img class="lazyload" data-original="${item.pro[1]}"></a>
              </div>
              <div class="img">
                <a href="./goods.html#id=${item.id}"><img class="lazyload" data-original="${item.pro[2]}"></a>
              </div>
            </div>
            <div class="sendSession">
                <div class="hea">
                    <img src="//style.org.hc360.com/images/chat/profile-red.png">
                    <em class="onLinetstatus"></em>
                </div>
            </div>
            </div>`
        }
        if (item.type === "tradeArea") {
          return `<div class="list tradeArea">
                    <div class="tradeAreaCon">
                      <div class="con">
                        <div class="fl img">
                          <a href="./goods.html#id=${item.id}" target="_blank">
                            <img class="lazyload" data-original="${item.img}">
                          </a>
                        </div>
                        <div class="fr">
                          <p class="tit">
                            <a href="./goods.html#id=${item.id}" target="_blank">${item.title}</a>
                          </p>
                          <p class="num">${item.num}</p>
                        </div>
                      </div>
                      <p class="intro">${item.intro}</p>
                      <div class="bot">
                        <div class="shop">
                          <a href="./goods.html#id=${item.id}" target="_blank"><em></em>
                            <p>店铺5家</p>
                          </a>
                        </div>
                        <div class="line"></div>
                        <div class="pro">
                          <a href="./goods.html#id=${item.id}" target="_blank"><em></em>
                            <p>优品19个</p>
                          </a>
                        </div>
                      </div>
                      <a href="./goods.html#id=${item.id}" class="btn" target="_blank">加入商圈</a>
                    </div>
                  </div>`
        }
        if (item.type === "product") {
          return `<div class="list product">                   
                    <div class="img">
                      <a href="./goods.html#id=${item.id}" target="_blank">
                        <img class="lazyload" data-original="${item.img}">
                      </a>
                    </div>
                    <div class="proCon">
                      <div class="tit">
                        <a href="./goods.html#id=${item.id}" target="_blank">${item.title}</a>
                      </div>
                      <div class="price">&yen;<span>${item.num}</span>/座</div>
                      <div class="companyName">
                        <a href="./goods.html#id=${item.id}" target="_blank">${item.intro}</a>
                      </div>
                    </div>
                    <div class="sendSession">
                      <div class="hea">
                        <img src="//style.org.hc360.com/images/chat/profile-red.png">
                        <em class=""></em>
                      </div>
                    </div>
                  </div>`
        }
        if (item.type === "purchase") {
          return `<div class="list purchase">
                    <div class="tit">
                      <p><a href="./goods.html#id=${item.id}" target="_blank">${item.title}</a></p>
                    </div>
                    <div class="purchaseCon">
                      <div class="top">
                        <p>距报价结束还剩</p>
                        <div class="time stime" data-enddate="1627833599000">
                          <dl>
                            <dd class="red sdd">00</dd>
                            <dd>天</dd>
                            <dd class="red shh">00</dd>
                            <dd>时</dd>
                            <dd class="red smm">00</dd>
                            <dd>分</dd>
                            <dd class="red sss">00</dd>
                            <dd>秒</dd>
                          </dl>
                        </div>
                      </div>
                      <ul>
                        <li>采购数量：${item.num}把</li>
                        <li>发布时间：${item.time1}</li>
                        <li>截止时间：${item.time2}</li>
                        <li>收货地区：${item.address}</li>
                      </ul>
                      <div class="more">
                        <a href="./goods.html#id=${item.id}" target="_blank">名企采购>>
                        </a>
                      </div>
                      <a target="_blank" class="quotedPrice">立即报价</a>
                    </div>
                  </div>`
        }
      }
    ).join("");
  }

  init();
});